import React, {PureComponent} from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ScrollView,
	Platform
} from 'react-native';


/**-------------引入外部组件----------------**/
let CommonCell = require('./CommonCell');

/**
 * @FileName: More
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description:
 */
class More extends PureComponent {
	/**
	 * 导航器属性设置
	 */
	static navigationOptions = {
		title: 'More',
		// 设置标题居中
		headerTitleStyle: {
			flex: 1,
			textAlign: 'center'
		},
		header: null
	};
	
	render() {
		return (
			<View style={styles.container}>
				{/*导航条*/}
				{this.renderNavBar()}
				{/*设置选项*/}
				<ScrollView>
					<View style={{marginTop: 20}}>
						<CommonCell title={'扫一扫'}/>
					</View>
					
					<View style={{marginTop: 20}}>
						<CommonCell title={'省流量模式'} isSwitch={true}/>
						<CommonCell title={'消息提醒'}/>
						<CommonCell title={'邀请好友使用'}/>
						<CommonCell title={'清空缓存'} rightTitle={'1.99M'}/>
					</View>
					
					<View style={{marginTop: 20}}>
						<CommonCell title={'问卷调查'}/>
						<CommonCell title={'支付帮助'}/>
						<CommonCell title={'网络诊断'}/>
						<CommonCell title={'关于abcd'}/>
						<CommonCell title={'我要应聘'}/>
					</View>
					
					<View style={{marginTop: 20}}>
						<CommonCell title={'精品应用'}/>
					</View>
				</ScrollView>
			</View>
		)
	}
	
	/**
	 * 渲染导航条
	 */
	renderNavBar() {
		return (
			<View style={styles.navOutViewStyle}>
				{/*中间文本*/}
				<Text style={{color: 'white', fontWeight: 'bold', fontSize: 18}}>更多</Text>
				{/*右侧图片*/}
				<TouchableOpacity
					onPress={() => {
						alert('设置')
					}}
					style={styles.rightViewStyle}
				>
					<Image style={styles.navImageStyle} source={{uri: 'icon_mine_setting'}}/>
				</TouchableOpacity>
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#E8E8E8'
	},
	// 导航栏父布局样式
	navOutViewStyle: {
		height: 54,
		backgroundColor: 'rgba(255,96,0,1.0)',
		// 主轴方向
		flexDirection: 'row',
		// 垂直居中
		alignItems: 'center',
		// 主轴居中
		justifyContent: 'center'
	},
	// 触摸点击图片位置设置
	rightViewStyle: {
		position: 'absolute',
		right: 10
	},
	// 导航图片样式
	navImageStyle: {
		width: Platform.OS === 'ios' ? 28 : 24,
		height: Platform.OS === 'ios' ? 28 : 24
	}
});

/**
 * 导出当前Module
 */
module.exports = More;